import axios from '@/utils/axios';
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { Button, Card, DatePicker, DatePickerProps, message, Space, Table } from 'antd';
import React, { useEffect, useState } from 'react';
import modal from 'antd/es/modal';
import OperateModal from './component/operateModal';
import CustomForm from '@/components/customerForm';
import { addUser, delUser, getUserInfo, updateUser } from '@/api/user';



const NormalList: React.FC = () => {
    const [loading, setLoading] = useState(false);
    const [dataSource, setDataSource] = React.useState<any[]>([]);
    const [modalConfig, setModalConfig] = useState({
        open: false,
        title: "",
        initValue: {},
    });

    const fetchData = (parmas?: any) => {
        setLoading(true);
        getUserInfo(parmas).then(re => {
            setTimeout(() => {
                setDataSource(re.data);
            }, 1000);
        }).finally(() => {
            setTimeout(() => {
                setLoading(false);
            }, 1000);
        })
    }

    useEffect(() => {
        fetchData();
    }, [])

    const columns = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
            render: (text: string) => <a>{text}</a>,
            width: 80
        }, {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        }, {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
            sorter: (a: any, b: any) => a.age - b.age,
            ellipsis: true,
        }, {
            title: '邮箱',
            dataIndex: 'email',
            key: 'email',
        }, {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
        }, {
            title: '电话',
            dataIndex: 'phone',
            key: 'phone',
        }, {
            title: '操作',
            dataIndex: '',
            key: "action",
            width: 120,
            render: (text: string, record: any) =>
                <>
                    <Button key={`edit-${record.id}`} type='primary' shape='circle' onClick={() => setModalConfig({ initValue: record, title: "修改用户", open: true })}>
                        <EditOutlined />
                    </Button>
                    <Button key={`delete-${record.id}`} type='primary' danger shape='circle' style={{ marginLeft: "10px" }} onClick={() => handleDelete(record.id)}>
                        <DeleteOutlined />
                    </Button>
                </>,
        }
    ]

    // 搜索配置
    const searchFileds = [
        {
            name: "name",
            label: "姓名",
            width: 200,
            allowClear: true,
        }, {
            name: "sex",
            label: "性别",
            width: 200,
            options: [
                {
                    label: "男",
                    value: "男"
                }, {
                    label: "女",
                    value: "女"
                }
            ]
        }, {
            name: "registime",
            label: "注册时间",
            render: () => <DatePicker style={{ width: 200 }} onChange={onChange} />
        }
    ]

    const onChange: DatePickerProps['onChange'] = (date: any, dateString: any) => {
        console.log(date, dateString)
    }

    const onSearch = (values: any) => {
        fetchData(values);
    }

    const handleDelete = (id: number) => {
        modal.confirm({
            title: '提示',
            icon: <ExclamationCircleOutlined />,
            content: '确认要删除吗？',
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
                delUser(id).then(re => {
                    message.success("删除成功");
                    fetchData();
                })
            }
        });
    }

    const onOk = (e: any) => {
        const methods = modalConfig.title === "添加用户" ? addUser : updateUser;
        const tips = modalConfig.title === "添加用户" ? "添加成功" : "修改成功";
        methods(e).then((re: any) => {
            message.success(tips);
            setModalConfig({ ...modalConfig, open: false });
            fetchData();
        })
    }

    const onCancel = (e: any) => {
        setModalConfig({ ...modalConfig, initValue: {}, open: false });
    }

    return (
        <Card styles={{ body: { paddingTop: 0 } }}>
            <CustomForm formFileds={searchFileds} onSubmit={onSearch} formLayout='inline' onSubmitTxt="搜索" onCancelTxt='重置' onCancel={fetchData} />
            <Button style={{ marginBottom: 10 }} type="primary" onClick={() => setModalConfig({ ...modalConfig, title: "添加用户", open: true })}>新增</Button>
            <Table loading={loading} dataSource={dataSource} columns={columns} rowKey={(record) => record.id}></Table>
            <OperateModal initValue={modalConfig.initValue} title={modalConfig.title} open={modalConfig.open} onOk={onOk} onCancel={onCancel} />
        </Card>
    )
}

export default NormalList;